<template>
    <div id="login">
      <vue-particles
        color="#fff"
        :particleOpacity="0.7"
        :particlesNumber="60"
        shapeType="circle"
        :particleSize="4"
        linesColor="#fff"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="2"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        class="lizi"
      ></vue-particles>
      <div class="login_in">
        <p style="text-align: center"><img src="../../assets/images/logo.png"></p>
        <h1>管理系统</h1>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
          <el-form-item label="账号" prop="phone">
            <el-input v-model="ruleForm.phone" @blur="codeFn()"></el-input>
          </el-form-item>
          <br>
          <el-form-item label="密码" prop="password">
            <el-input v-model="ruleForm.password" type="password"></el-input>
          </el-form-item>
          <br>
          <el-form-item label="验证码" prop="code" v-if="codeShow">
            <el-input v-model="ruleForm.code" type="code"></el-input>
          </el-form-item>
          <br>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')" class="loginIn" :loading="loginLoading">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
              codeShow:false,
              loginLoading:false,
              ruleForm:{
                phone: '',
                password:'',
                code:''
              },
              rules:{
                phone: [
                  { required: true, message: '请输入账号', trigger: 'blur' },
                  { min: 11, max: 11, message: '长度在 11 个字符', trigger: 'blur' },
                ],
                password:[
                  { required: true, message: '请输入密码', trigger: 'blur' },
                  { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
                ],
                code: [
                  { required: true, message: '请输入验证码', trigger: 'blur' },
                ],
              },
            }
        },
      methods: {
        codeFn:function(){
          if(this.ruleForm.phone.length === 11){
            let data = {
              mobile:this.ruleForm.phone,
            };
            let str = this.encryptionAesRsa(data);
            let encryptData = str.split('%$#@zjt@#$%')[0];
            let encryptKey = str.split('%$#@zjt@#$%')[1];
            let incomData = {
              map:'api_verify_login_phone',
              plum_session_api:'',
              encryptData:encryptKey,
              encryptKey:encryptData
            };
            this.$http.post('',incomData).then((data)=>{
              if(data.ec==200){
                if(data.data.status == '300'){
                  this.codeShow = true
                }else {
                  this.codeShow = false
                }
              }else {
                this.$message.error(data.em);
                this.codeShow = false
              }
            }).catch((err)=>{
              this.$message.error(err);
              this.codeShow = false
            })
          }else {
            this.codeShow = false
          }
        },
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.loginLoading = true;
              let data = {
                mobile:this.ruleForm.phone,
                password:this.ruleForm.password,
                sms:this.ruleForm.code
              };
              let str = this.encryptionAesRsa(data);
              let encryptData = str.split('%$#@zjt@#$%')[0];
              let encryptKey = str.split('%$#@zjt@#$%')[1];
              let incomData = {
                map:'admin_user_login',
                plum_session_api:'',
                encryptData:encryptKey,
                encryptKey:encryptData
              };
              this.$http.post('',incomData).then((data)=>{
                if(data.ec==200){
                  this.loginLoading = false;
                  localStorage.setItem("token",data.data.session);
                  localStorage.setItem("UserName",data.data.name);
                  this.$router.push('/');
                  this.$message.success(data.em);
                }else {
                  this.loginLoading = false;
                  this.$message.error(data.em);
                }
              }).catch((err)=>{
                this.$message.error('登录失败');
              })
            } else {
              this.$message.error('登录失败');
              return false;
            }
          });
        },
      },
    }
</script>

<style scoped>
#login{
  overflow-y: hidden;
  top: 0;
  width: 100%;
  height: 100%;
  right: 0;
  left: 0;
  bottom: 0;
  background-image: url("../../assets/images/bgImg.jpg");
  background-repeat: no-repeat;
  background-size:100% 100% ;
  position: absolute;
}
.login_in{
    width: 500px;
    min-height: 360px;
    border-radius: 10px;
    padding:40px 40px 20px 0;
    background-color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
  }
.login_in h1{
  width: 100%;
  text-align: center;
  margin-bottom: 30px;
  color:#F56C6C;
  margin-left: 20px;
}
.loginIn{
  width: 100%;
}
.login_in p img{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  padding-bottom: 10px;
  margin-left: 40px;
}
</style>
